
.menu-mobile .menu-section.on {
  z-index: 10;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position:fixed;
  background-color: rgba(55, 61, 73, 0.9);
  overflow:scroll;
}

.menu-mobile .menu-toggle {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 40px;
  right: 25px;
  cursor: pointer;
  z-index: 11;
}

.menu-toggle.on{
  position:fixed;
}

.menu-mobile .menu-toggle.on .one {

  -moz-transform: rotate(45deg) translate(7px, 7px);
  -ms-transform: rotate(45deg) translate(7px, 7px);
  -webkit-transform: rotate(45deg) translate(7px, 7px);
  transform: rotate(45deg) translate(7px, 7px);
}

.menu-mobile .menu-toggle.on .two {
  opacity: 0;
}

.menu-mobile .menu-toggle.on .three {
  -moz-transform: rotate(-45deg) translate(7px, -8px);
  -ms-transform: rotate(-45deg) translate(7px, -8px);
  -webkit-transform: rotate(-45deg) translate(7px, -8px);
  transform: rotate(-45deg) translate(7px, -8px);
}

.menu-mobile .one,
.menu-mobile .two,
.menu-mobile .three {
  width: 100%;
  height: 4px;
  background: white;
  margin: 6px auto;
  backface-visibility: hidden;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.menu-mobile .menu-toggle:hover .one,
.menu-mobile .menu-toggle:hover .two,
.menu-mobile .menu-toggle:hover .three{
  background: #C64087;
}

.menu-mobile nav ul {
  margin: 0;
  padding: 0;
  
  list-style: none;
  margin: 12em auto;
  text-align: center;
}

.menu-mobile nav ul.hidden {
  display: none;
}

.menu-mobile nav ul a {
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  text-decoration: none !important;
  color: white;
  width: 100%;
  display: block;
}

@media (min-width: 670px) {
    .menu-mobile nav ul a {
      font-size: 1.5em;
      line-height: 1.5;
    }

    .menu-mobile nav ul {
      margin: 8em auto;
    }

    .menu-mobile .menu-toggle::before {
      content: "Explore";
      position: absolute;
      left: -70px;
      top: 4px;
      color: #fff;
    }


    .menu-mobile .menu-toggle.on::before{
      content: "Close";
      left: -60px;
    }
}

@media (min-width: 960px) {
    .menu-mobile nav ul a {
      font-size: 2.0em;
      line-height: 1.5;
    }
}

.menu-mobile nav ul a:hover, .menu-mobile nav ul li a.active {
  background-color: #C64087;
  color:#fff;
}